<template>
  <el-dialog :title="title" :visible.sync="isShow" width="800px" :center="true" :close-on-click-modal="false" @open='ifshow' @close="closeLayer" class="layerTitle">
    <div class="layer-info">
      <div class="layer-box">
        <div class="box-title">
          <span class="span1">保单号：</span>
          <span v-if="layerData.guaranteeSlipNumber" class="span2">{{layerData.guaranteeSlipNumber}}</span>
          <span v-else class="span2">-</span>
          <img v-if="layerData.guaranteeSlipType=='1'" src="../../../assets/images/icon-shangye.png" alt="" class="size" />
          <img v-else-if="layerData.guaranteeSlipType=='2'" src="../../../assets/images/icon-jiaoqiang.png" alt="" class="size" />
          <!-- <span v-else>-</span> -->
        </div>
        <div class="box-body">
          <div class="body-row">
            <div class="col">
              <span class="col-name">车牌号：</span>
              <span class="col-text" v-if='layerData.plateNumber'>{{layerData.plateNumber}}</span>
              <span class="col-text" v-else>-</span>
            </div>
            <!-- <div class="col col1">
              <span class="col-name">被&ensp;保&ensp;人：</span>
              <span class="col-text">张十三</span>
            </div> -->
            <div class="col  col1">
              <span class="col-name">业务归属：</span>
              <span class="col-text" v-if="layerData.organizationUnitName">{{layerData.organizationUnitName | lastname}}</span>
              <span v-else class="col-text">-</span>
            </div>
          </div>
          <div class="body-row">
            <div class="col">
              <span class="col-name">车船税：</span>
              <span class="col-text" v-if="layerData.guaranteeVehicleAndVesselTax  || layerData.guaranteeVehicleAndVesselTax ==0">{{layerData.guaranteeVehicleAndVesselTax | numFilter}}&nbsp;元</span>
              <span v-else class="col-text">-</span>
            </div>
            <div class="col">
              <span class="col-name">含税保费：</span>
              <span class="col-text" v-if="layerData.totalPremium || layerData.totalPremium==0">{{layerData.totalPremium | numFilter}} &nbsp;元</span>
              <span v-else class="col-text">-</span>
            </div>
            <div class="col">
              <span class="col-name">不含税保费：</span>
              <span class="col-text" v-if="layerData.totalNetPremium || layerData.totalNetPremium==0">{{layerData.totalNetPremium | numFilter}} &nbsp;元</span>
              <span v-else class="col-text">-</span>
            </div>
          </div>
        </div>
      </div>
      <div class="layer-box">
        <div class="box-title">
          <span class="span1">政策预估费用</span>
          <span class="span3" v-if="layerData.totalCost || layerData.totalCost==0">( <span class="span4">合计{{layerData.totalCost}}元</span> )</span>
          <span class="span3" v-else>-</span>
        </div>
        <div class="box-body">
          <div class="body-row">
            <div class="col">
              <span class="col-name">保单手续费比例：</span>
              <span class="col-text" v-if="layerData.chargeRatio || layerData.chargeRatio==0">{{layerData.chargeRatio}} %</span>
              <span v-else class="col-text">-</span>
            </div>
            <div class="col">
              <span class="col-name">车船税佣金比例：</span>
              <span class="col-text" v-if="layerData.vehicleAndVesselTaxRatio||layerData.vehicleAndVesselTaxRatio==0">{{layerData.vehicleAndVesselTaxRatio}} %</span>
              <span v-else class="col-text">-</span>
            </div>
            <div class="col">
              <span class="col-name">附加奖励比例：</span>
              <span class="col-text" v-if="layerData.additionalRewardRatio||layerData.additionalRewardRatio==0">{{layerData.additionalRewardRatio}} %</span>
              <span v-else class="col-text">-</span>
            </div>
          </div>
          <div class="body-row">
            <div class="col">
              <span class="col-name">保 单 手 续 费：</span>
              <span class="col-text" v-if="layerData.charge||layerData.charge==0">{{layerData.charge | numFilter}}&nbsp;元</span>
              <span v-else class="col-text">-</span>
            </div>
            <div class="col">
              <span class="col-name">车 船 税 佣 金：</span>
              <span class="col-text" v-if="layerData.vehicleAndVesselTax||layerData.vehicleAndVesselTax==0">{{layerData.vehicleAndVesselTax | numFilter}} &nbsp;元</span>
              <span v-else class="col-text">-</span>
            </div>
            <div class="col">
              <span class="col-name">附加奖励金额：</span>
              <span class="col-text" v-if="layerData.additionalReward||layerData.additionalReward==0">{{layerData.additionalReward | numFilter}} &nbsp;元</span>
              <span v-else class="col-text">-</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="layer-form">
      <div class="form-title">
        <span class="span1">实结金额</span>
        <span class="span3" v-if="yingjie">( <span class="span4">合计{{yingjie}}元</span> )</span>
        <span class="span3" v-else>-</span>
      </div>
      <div class="form-choose clearfix">
        <div class="choose1">
          <span class="span5">保费类型：</span>
          <el-radio-group v-model="premiumType" size="mini" @change='typechange'>
            <el-radio-button label="1" :disabled="layerData.isMatchPolicy">净保费</el-radio-button>
            <el-radio-button label="0" :disabled="layerData.isMatchPolicy">全保费</el-radio-button>
          </el-radio-group>
        </div>
        <div class="choose1">
          <span class="span5">返佣类型：</span>
          <el-radio-group v-model="choose2" size="mini">
            <el-radio-button label="2">百分比</el-radio-button>
            <el-radio-button label="1">&emsp;元&emsp;</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="form-row clearfix">
        <div class="f-col col2">
          <span class="span5">保单手续费比例：</span>
          <span class="layer-text" v-if="choose2 == '1'&& layerData.aPoundageRatio != null">
            {{layerData.aPoundageRatio | numFilter}}
          </span>
          <span v-if="choose2 == '1' && layerData.aPoundageRatio == null">-</span>
          <el-input v-else-if="choose2 == '2'" type="text" @change="clearNoNum($event,'aPoundageRatio',100)" class="wd80" size="mini" v-model="layerData.aPoundageRatio"></el-input> %
        </div>
        <div class="f-col col2">
          <span class="span5">车船税佣金比例：</span>
          <span class="layer-text" v-if="choose2 == '1'&& layerData.aVehicleAndVesselTaxRatio != null">
            {{layerData.aVehicleAndVesselTaxRatio | numFilter}}
          </span>
          <span v-if="choose2 == '1' && layerData.aVehicleAndVesselTaxRatio == null">-</span>
          <el-input v-else-if="choose2 == '2'" type="text" @change="clearNoNum($event,'aVehicleAndVesselTaxRatio',100)" class="wd80" size="mini" v-model="layerData.aVehicleAndVesselTaxRatio"></el-input> %
        </div>
        <div class="f-col">
          <span class="span5">附加奖励比例：</span>
          <span class="layer-text" v-if="choose2 == '1'&& layerData.aAdditionalRewardRatio != null">
            {{layerData.aAdditionalRewardRatio | numFilter}}
          </span>
          <span v-if="choose2 == '1' && layerData.aAdditionalRewardRatio == null">-</span>
          <el-input v-else-if="choose2 == '2'" type="text" @change="clearNoNum($event,'aAdditionalRewardRatio',100)" class="wd80" size="mini" v-model="layerData.aAdditionalRewardRatio"></el-input> %
        </div>
      </div>
      <div class="form-row clearfix">
        <div class="f-col col2">
          <span class="span5">保 单 手 续 费：</span>
          <span class="layer-text" v-if="choose2 == '2'&& layerData.aPoundage != null">
            {{layerData.aPoundage | numFilter}}
          </span>
          <span v-if="choose2 == '2' && layerData.aPoundage == null">-</span>
          <el-input type="text" v-else-if="premiumType==0 && choose2 == '1'" class="wd80" @change="clearNoNum($event,'aPoundage',layerData.totalPremium)" size="mini" v-model="layerData.aPoundage"></el-input>
          <el-input type="text" v-else-if="premiumType==1 && choose2 == '1'" class="wd80" @change="clearNoNum($event,'aPoundage',layerData.totalNetPremium)" size="mini" v-model="layerData.aPoundage"></el-input>&nbsp;元
        </div>
        <div class="f-col col2">
          <span class="span5">车 船 税 佣 金：</span>
          <span class="layer-text" v-if="choose2 == '2' && layerData.aVehicleAndVesselTax != null">
            {{layerData.aVehicleAndVesselTax | numFilter}}
          </span>
          <span v-if="choose2 == '2' && layerData.aVehicleAndVesselTax == null">-</span>
          <el-input type="text" v-else-if="choose2 == '1'" class="wd80" @change="clearNoNum($event,'aVehicleAndVesselTax',layerData.guaranteeVehicleAndVesselTax)" size="mini" v-model="layerData.aVehicleAndVesselTax"></el-input>&nbsp;元
        </div>
        <div class="f-col">
          <span class="span5">附加奖励金额：</span>
          <span class="layer-text" v-if="choose2 == '2'&&layerData.aAdditionalReward != null">
            {{layerData.aAdditionalReward | numFilter}}
          </span>
          <span v-if="choose2 == '2' && layerData.aAdditionalReward == null">-</span>
          <el-input type="text" v-else-if="premiumType==0 && choose2 == '1'" class="wd80" @change="clearNoNum($event,'aAdditionalReward',layerData.totalPremium)" size="mini" v-model="layerData.aAdditionalReward"></el-input>
          <el-input type="text" v-else-if="premiumType==1 && choose2 == '1'" class="wd80" @change="clearNoNum($event,'aAdditionalReward',layerData.totalNetPremium)" size="mini" v-model="layerData.aAdditionalReward"></el-input>&nbsp;元
        </div>
      </div>

      <div class="form-remark">
        <span>备&emsp;&emsp;注：</span>
        <el-input type="textarea" class="wd645" size="mini" :rows="3" v-model="layerData.aRemark" resize='none'></el-input>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="info" size="small" @click="quit()" class="wd80">取&emsp;消</el-button>
      <el-button type="primary" size="small" @click="save(layerData)" class="wd80">确&emsp;定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "layer",
  props: {
    title: {
      type: String
    },
    datas: {
      type: Object
    },
    isShow: {
      type: Boolean,
      default: false
    },
    types: {
      type: Number,
      default: null
    },
    save: {
      type: Function,
      default: null
    },
    quit: {
      type: Function,
      default: null
    },
    closeLayer: {
      type: Function
    },
    guaranteeSlipType: {
      type: Number
    }
  },

  computed: {
    yingjie() {
      let baodan = this.layerData.aPoundage;
      let fujia = this.layerData.aAdditionalReward;
      let che = this.layerData.aVehicleAndVesselTax;
      console.log(baodan, fujia, che);
      console.log("111");
      // this.layerData.ATotalCost
      let yingjie = 0;
      let a = 0;
      if (baodan) {
        yingjie += Number(baodan);
        a += 1;
      }
      if (fujia) {
        yingjie += Number(fujia);
        a += 1;
      }
      if (che) {
        yingjie += Number(che);
        a += 1;
      }
      if (a == 0 && yingjie == 0) {
        return null;
      } else {
        if (!isNaN(yingjie)) {
          return yingjie.toFixed(2);
        }
      }
    }
  },
  filters: {
    lastname(val) {
      let index = val.lastIndexOf("-");
      if (index !== "-1") {
        let sli = val.substr(index + 1, val.length);
        return sli;
      }
    },
    numFilter(val) {
      // 截取当前数据到小数点后两位
      // let realVal = Number(val).toFixed(2)
      // num.toFixed(2)获取的是字符串
      // return Number(realVal)
      if (val || val == 0) {
        val = val.toString().replace(/\$|\,/g, "");
        if (isNaN(val)) {
          val = "0";
        }
        let sign = val == (val = Math.abs(val));
        val = Math.floor(val * 100 + 0.50000000001);
        let cents = val % 100;
        val = Math.floor(val / 100).toString();
        if (cents < 10) {
          cents = "0" + cents;
        }
        for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
          val =
            val.substring(0, val.length - (4 * i + 3)) +
            "," +
            val.substring(val.length - (4 * i + 3));
        }

        return (sign ? "" : "-") + val + "." + cents;
      }
    }
  },
  mounted() {},
  data() {
    return {
      layerData: {},
      radios: "1",
      premiumType: "1",
      choose2: "2",
      datas: {
        guaranteeSliId: "00000000-0000-0000-0000-000000000000",
        guaranteeSlipNumber: "21233",
        name: "朱迪",
        guaranteeSlipType: 1,
        organizationUnitName: "组织机构名称",
        charge: 100,
        vehicleAndVesselTax: 200,
        additionalReward: 300,
        totalCost: 3000,
        totalPremium: 3200,
        totalNetPremium: 2200,
        premiumType: 0,
        isReward: true,
        aPoundageRatio: 10,
        aPoundage: 400,
        aVehicleAndVesselTaxRatio: 12,
        aVehicleAndVesselTax: 310,
        aAdditionalRewardRatio: 11,
        aAdditionalReward: 400
      },
      show: false
    };
  },
  methods: {
    ifshow() {
      const _this = this;
      _this.layerData = Object.assign({}, {}, {});
      _this.choose2 = '2'
      let settleTypes = this.types;
      let id = this.datas.id;
      console.log(this.datas);
      console.log("**********************************2");
      if (this.isShow) {
        if (_this.datas.cid || _this.datas.batchId) {
          let params = {
            guaranteeSlipId: _this.datas.id,
            batchId: _this.datas.batchId
          };
          this.post(
            params,
            "services/app/settle/LowerSettleDetailSettleInfo"
          ).then(rs => {
            if (rs.success) {
              let a = {};
              if (rs.result) {
                a = rs.result;
                a.cid = _this.datas.cid;
                this.premiumType = rs.result.premiumType;
                var b = Object.assign(a, a, {
                  aPoundageRatio: this.numFilter(a.aPoundageRatio),
                  aPoundage: this.numFilter(a.aPoundage),
                  aAdditionalRewardRatio: this.numFilter(
                    a.aAdditionalRewardRatio
                  ),
                  aAdditionalReward: this.numFilter(a.aAdditionalReward),
                  aVehicleAndVesselTaxRatio: this.numFilter(
                    a.aVehicleAndVesselTaxRatio
                  ),
                  aVehicleAndVesselTax: this.numFilter(a.aVehicleAndVesselTax)
                });
                _this.layerData = b;
              } else {
                _this.layerData = {};
              }
            }
          });
        } else {
          let params = {
            guaranteeSlipId: id,
            settleTypes: settleTypes
          };
          this.post(params, "services/app/settle/SettleDetailSettleInfo").then(
            rs => {
              if (rs.success) {
                if (rs.result) {
                  var a = {};
                  a = rs.result;
                  console.log(a);
                  this.premiumType = rs.result.premiumType;
                  var b = Object.assign(a, a, {
                    aPoundageRatio: this.numFilter(a.aPoundageRatio),
                    aPoundage: this.numFilter(a.aPoundage),
                    aAdditionalRewardRatio: this.numFilter(
                      a.aAdditionalRewardRatio
                    ),
                    aAdditionalReward: this.numFilter(a.aAdditionalReward),
                    aVehicleAndVesselTaxRatio: this.numFilter(
                      a.aVehicleAndVesselTaxRatio
                    ),
                    aVehicleAndVesselTax: this.numFilter(a.aVehicleAndVesselTax)
                  });
                  console.log(b);

                  _this.layerData = b;
                  console.log(_this.layerData);
                  console.log("**********************************3");
                }
              }
            }
          );
        }
      }
    },

    numFilter(val) {
      // 截取当前数据到小数点后两位
      // let realVal = Number(val).toFixed(2)
      // num.toFixed(2)获取的是字符串
      // return Number(realVal)
      if (val || val == 0) {
        val = val.toString().replace(/\$|\,/g, "");
        if (isNaN(val)) {
          val = "0";
        }
        let sign = val == (val = Math.abs(val));
        val = Math.floor(val * 100 + 0.50000000001);
        let cents = val % 100;
        val = Math.floor(val / 100).toString();
        if (cents < 10) {
          cents = "0" + cents;
        }
        for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
          val =
            val.substring(0, val.length - (4 * i + 3)) +
            "," +
            val.substring(val.length - (4 * i + 3));
        }

        return (sign ? "" : "-") + val + "." + cents;
      }
    },
    clearNoNum(obj, name, maxnum) {
      obj = obj.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      obj = obj.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      obj = obj
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      obj = obj.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
      if (obj.indexOf(".") < 0 && obj != "") {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        obj = parseFloat(obj);
      }

      if (maxnum && obj > maxnum) {
        obj = maxnum;
      }
      var obj = this.numFilter(obj);
      if (name) {
        this.layerData[name] = obj;
      }
      this.mackChange(name);

      return obj;
    },
    //笨办法 根据name改变对应的数值
    mackChange(name) {
      //let num = this.layerData[name]
      var total;
      if (this.premiumType == 0) {
        total = this.layerData.totalPremium;
      } else {
        total = this.layerData.totalNetPremium;
      }

      if (name == "aPoundageRatio") {
        let num = total * (this.layerData.aPoundageRatio / 100);
        this.layerData.aPoundage = num.toFixed(2);
      }
      if (name == "aPoundage") {
        let num = (this.layerData.aPoundage / total) * 100;
        if (!isNaN(num)) {
          this.layerData.aPoundageRatio = num.toFixed(2);
        }
      }
      if (name == "aAdditionalReward") {
        let num = (this.layerData.aAdditionalReward / total) * 100;
        if (!isNaN(num)) {
          this.layerData.aAdditionalRewardRatio = num.toFixed(2);
        }
      }
      if (name == "aAdditionalRewardRatio") {
        let num = total * (this.layerData.aAdditionalRewardRatio / 100);
        if (!isNaN(num)) {
          this.layerData.aAdditionalReward = num.toFixed(2);
        }
      }
      if (name == "aVehicleAndVesselTax") {
        if(!this.layerData.guaranteeVehicleAndVesselTax ||this.layerData.guaranteeVehicleAndVesselTax  == 0 ){
          this.layerData.aVehicleAndVesselTaxRatio = 0
        }else{
          let num = (this.layerData.aVehicleAndVesselTax / this.layerData.guaranteeVehicleAndVesselTax) * 100;
        if (!isNaN(num)) {
          this.layerData.aVehicleAndVesselTaxRatio = num.toFixed(2);
        }
        }
        
      }
      if (name == "aVehicleAndVesselTaxRatio") {
        if(!this.layerData.guaranteeVehicleAndVesselTax ||this.layerData.guaranteeVehicleAndVesselTax  == 0 ){
           this.layerData.aVehicleAndVesselTax = 0
        }else{
        let num = this.layerData.guaranteeVehicleAndVesselTax * (this.layerData.aVehicleAndVesselTaxRatio / 100);
        if (!isNaN(num)) {
          this.layerData.aVehicleAndVesselTax = num.toFixed(2);
        }
        }
      }
      // if (radios == "1") {
      //   let num = this.layerData.aPoundage / total * 100;
      //   if (!isNaN(num)) {
      //     this.layerData.aPoundageRatio =  num.toFixed(2)
      //   }
      // } else {
      //   let num = total * (this.layerData.aPoundageRatio / 100);
      //   if (!isNaN(num)) {
      //     this.layerData.aPoundage = num.toFixed(2)
      //   }
      // }
    },
    baoChange(event) {
      let min = this.clearNoNum(event);
      this.min = min;
    },
    hasOneShowingChildren(children) {
      const showingChildren = children.filter(item => {
        return !item.hidden;
      });
      if (showingChildren.length === 1) {
        return true;
      }
      return false;
    },
    typechange(val){
      this.layerData.premiumType = val;
      if(val==1){
        if(this.choose2==2){
          if(this.layerData.aPoundageRatio){
            this.clearNoNum(this.layerData.aPoundageRatio,'aPoundageRatio',100)
          }
          if(this.layerData.aAdditionalRewardRatio){
            this.clearNoNum(this.layerData.aAdditionalRewardRatio,'aAdditionalRewardRatio',100)
          }
        }else{
          if(this.layerData.aPoundage){
            this.clearNoNum(this.layerData.aPoundage,'aPoundage',this.layerData.totalNetPremium);
          }
          if(this.layerData.aAdditionalReward){
            this.clearNoNum(this.layerData.aAdditionalReward,'aAdditionalReward',this.layerData.totalNetPremium);
          }
        }
      }else{
        if(this.choose2==2){
          if(this.layerData.aPoundageRatio){
            this.clearNoNum(this.layerData.aPoundageRatio,'aPoundageRatio',100)
          }
          if(this.layerData.aAdditionalRewardRatio){
            this.clearNoNum(this.layerData.aAdditionalRewardRatio,'aAdditionalRewardRatio',100)
          }
        }else{
          if(this.layerData.aPoundage){
            this.clearNoNum(this.layerData.aPoundage,'aPoundage',this.layerData.totalPremium);
          }
          if(this.layerData.aAdditionalReward){
            this.clearNoNum(this.layerData.aAdditionalReward,'aAdditionalReward',this.layerData.totalPremium);
          }
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.wd80 {
  width: 80px;
}
.layer-cent {
  width: 480px;
  background: #fff;
  padding: 20px;
  font-size: 13px;
}
.layer-info {
  font-size: 13px;
  // padding: 10px 115px;
  padding: 10px 25px;
  border-bottom: 1px solid #e9e9e9;
}
.layer-row {
  line-height: 28px;
  height: 28px;
  margin-bottom: 17px;
  font-size: 13px;
  .layer-col {
    width: 50%;
    float: left;
    .layer-name1 {
      display: inline-block;
      color: #666;
      width: 80px;
    }
    .layer-name2 {
      display: inline-block;
      width: 120px;
      color: #666;
    }
    .layer-text {
      display: inline-block;
      color: #333;
    }
    .layer-name3 {
      color: #666;
    }
  }
  .layer-col2 {
    width: 40%;
  }
  .layer-col1 {
    width: 60%;
  }
}
.layer-row-text {
  margin-bottom: 0;
}
.wd645 {
  width: 645px;
  vertical-align: top;
}
.wd80 {
  width: 80px;
}
.layer-tips {
  color: #ff7819;
  font-size: 14px;
  margin-top: 14px;
  line-height: 20px;
}
.layer-red {
  color: #d6313e;
}
// 新
.box-title {
  height: 22px;
  margin: 9px 0 20px 0;
}
.span1 {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}
.span2 {
  font-size: 16px;
  color: #0f62c2;
  font-weight: 500;
}
.span3 {
  margin-left: 10px;
  font-size: 16px;
  color: #333;
}
.span4 {
  font-size: 14px;
  color: #cf1322;
}
.size {
  height: 22px;
  margin-left: 10px;
  width: 22px;
  vertical-align: top;
}
.layer-box:first-child {
  border-bottom: 1px dashed #aeaeae;
}
.body-row {
  margin-bottom: 10px;
  height: 18px;
  line-height: 18px;
}
.col {
  font-size: 13px;
  color: #666666;
  float: left;
  width: 33.33%;
  .col-name{
    font-size: 13px;
    color: #333333;
    width: 106px;
    display: inline-block;
    text-align: left;
  }
}
.col1 {
   width: auto;
}
.layer-form {
  padding: 19px 25px 0;
}
.form-title {
  margin-bottom: 20px;
}
.form-choose {
  margin-bottom: 15px;
}
.form-remark {
  margin-top: 20px;
}
.span5 {
  font-size: 13px;
  color: #333333;
  width: 106px;
  display: inline-block;
  text-align: left;
}
.choose1 {
  float: left;
  width: 33.33%;
}
.form-row {
  margin-bottom: 10px;
}
.f-col {
  height: 28px;
  line-height: 28px;
  float: left;
  width: 33.33%;
}
.col2 {
  // width: 260px;
}
</style>
